<style>
.count{
width: 30px !important;
}

.row{
width: 30px !important;
}

.andonLb{
width: 30px !important;
padding-left:5px;
}

.collect{
    float: right;
}
.collect span{
    float: left;
    overflow: hidden;
    position: static;
    width: 7px;
    height: 10px;
    margin-left: 3px;
    padding: 0px !important;

}

.pageHeader-collect {
    display: block;
    overflow: auto;
    margin-bottom: 1px;
    position: relative;
    padding-top: 5px;
}

.andonArea{
    overflow: auto;
}

.andonArea span{
    width: 200px;
    display: inline-block;
    overflow: hidden;
}

.andonArea-border{
    border-width: 1px 0 0 0;
    border-style: dashed;
    border-color: #D9DEE6;
}

.andonArea table{
    width:100%
}
.andonBox {
	height: 230px;
    width: 276px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	text-align: center;
}

.andonBox .andon-title {
	height: 56px;
    padding-top: 10px;
    text-align: left;
}

.andonBox .andon-title .andon-name {
	margin-left: 40px;
    font-size: 16px;
    display: block;
    margin-top: 5px;
}

.andonBox .andon-title .andon-code {
    margin-left: 40px;
    font-size: 16px;
    display: block;
    margin-top: 15px;
}

.andonBox>ul {
	list-style: none;
	padding-left: 13px;
	display: inline-block;
	text-align: left;
	width: 207px;
}

.andonBox>ul>li {
	margin-top: 8px;
    display: block;
}

.andonBox>ul>li>span {
	font-size: 14px;
	font-weight: 400;
	margin-bottom: 0;
}

.andonBox .andon-line {
	border-width: 1px 0 0 0;
    border-style: dashed;
    overflow: hidden;
    height: 1px;
    display: inline-block;
    width: 180px;
    float: left;
    margin-left: 30px;
    margin-top: 4px;
}

.ordinary-box {
	background: url(${rc.getContextPath()}/images/andon/mm_andon_bg.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.hover-box {
	background: url(${rc.getContextPath()}/images/andon/mm_andon_bg_hover.png);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.andonBox .andon-line {
	border-color: #D9DEE6;
}

.ordinary-box .andon-title .andon-name {
		color: #F3696B;
}

.ordinary-box .andon-title .andon-code {
	color: #F3696B;
}

.hover-box .andon-title .andon-name {
	color: #fff;
}

.hover-box .andon-title .andon-code {
	color: #fff;
}

.hover-box>ul>li span{
	color: #fff;
}

.pcerror span{
  position: absolute !important;
  left: 538px;
  top: 10px;
}
</style>
<div class="pageContent">
	<form action="" class=" pageForm required-validate">
		<div id="pageHeader" class="pageHeader">
			<div class="collect">
				<span id="arrow" class="arrow-up" onclick="andonRequirementJs._open()"></span>
			</div>
			<div id="collapsablePanel" class="searchBar">
				<ul class="searchContent">
					<li><label><@label key="workCenter.C,colon">工作中心：</@label></label> <select id="workcenter" onchange="andonRequirementJs._workCenterChange(this)" class="allyselect required" ref="workUnit" postField="workcenterCode" refUrl="${rc.getContextPath()}/manage/workCenter/workCenterChange" name="workCenterCode" class="required"> <#list workcenters as workcenter>
							<option value='${workcenter.workCenterCode}'>${workcenter.workCenterCode}-${workcenter.workCenterText}</option> </#list>
					</select></li>
					<li class="pcerror"><label><@label key="productionControlNum.C,colon">生产管理号：</@label></label> <input class="required look" id="productionControlLookup.productionControlNum" name="productionControlNum" type="text" postField="productionControlNum" warn="<@label key='productionControlNotInWorkcenter.M'>工作中心中不存在该生产管理号</@label>" remote="${rc.getContextPath()}/manage/productionControl/validateProductionControl" suggestFields="productionControlNum" suggestUrl="${rc.getContextPath()}/manage/productionControl/productionControlSuggest" lookupGroup="productionControlLookup" callback="andonRequirementJs._pcChange" /> <a id="productionControlBtn" class="btnLook" callback="andonRequirementJs._pcChange" href="${rc.getContextPath()}/manage/productionControl/productionControlLookUp" rel="materialLookup_dialog" title="<@label key='select.C,productionControlNum.C'>选择生产管理号</@label>" lookupGroup="productionControlLookup" /></a></li>
					<li><label><@label key="workUnit.C,colon">作业单元：</@label></label> <select id="workUnit" field="workUnitCode" name="workUnitCode" label="workUnitSelectText">
					</select></li>
				</ul>
				<ul class="searchContent">
					<li><label><@label key="processOperationId.C,colon">工艺工序：</@label></label> <select id="processOperation" class="required" name="processOperationId">
					</select></li>
					<li><label><@label key="layout.C,colon">布局：</@label></label> <label class="row"><@label key="row.C">每行</@label></label> <input id="count" type="text" value="4" class="digits count required" maxlength="2" min="1"/> <label class="andonLb">ANDON</label></li>
					<li class="query">
						<div class="buttonActive">
							<div class="buttonContent">
								<button type="button" onclick="andonRequirementJs._submit(this)"><@label key="query.B">查询</@label></button>
							</div>
						</div>
					</li>
				</ul>
			</div>

		</div>

	</form>
	<div id="andonArea" class="andonArea andonArea-border" layoutH="75">
		<table id="andonTable">

		</table>

	</div>
</div>

<script type="text/javascript">
	var andonRequirementJs = {
		_intervalArray:[],
	    _submit: function (t) {
	        var $form = $(t).parents('form:first');
	        if (!$form.valid()) {
	            return false;
	        }
			var pnum=$("#productionControlLookup\\.productionControlNum",navTab.getCurrentPanel()).val();
			if(pnum){
				var workcenterCode= $("#workcenter",navTab.getCurrentPanel()).val();
		    	var validateUrl="${rc.getContextPath()}/manage/productionControl/validateProductionControl";
		        if(workcenterCode){
		        	 validateUrl="${rc.getContextPath()}/manage/productionControl/validateProductionControl?workcenterCode="+workcenterCode;
		        }
				var result;
				$.ajax({
					type: 'POST',
					url: validateUrl,
					data: {
						productionControlNum: pnum
					},
					dataType: "text",
					async:false,
					success: function(data) {
						result = data;	
					},
					error: DWZ.ajaxError
				});
				if (result=="false") {
					return false;
				}
			}
			var $andonTable=$('#andonTable', navTab.getCurrentPanel());
			$andonTable.html("");
			$.each(andonRequirementJs._intervalArray, function(n, value) {
				 console.log(value);
				 clearInterval(value);
			});
			andonRequirementJs._intervalArray=[];
	        var d=$form.serializeArray();
	        DWZ.ajax({
	            type:'POST',
	            url:'${rc.getContextPath()}/manage/andonPull/getAndons',
	            data:d,
	            dataType:"json",
	            cache: false,
	            success: function(data){
	            	if (data.data) {
	            		var count=$('#count', navTab.getCurrentPanel()).val();
	            		var index=0;
	            		var $tr;
						$.each(data.data, function(n, value) {
							if(index==0){
								$tr= $('<tr/>');
								$andonTable.append($tr);
							}
							var $td = $('<td/>');
							var memo=value.memo||'';
							var reqQuantity=value.reqQuantity||'';
							var workUnitCode=value.workUnitCode||'';
							var id='"'+value.andonCode+'"';
							var ht="<div id='"+value.andonCode+"' onclick='andonRequirementJs._andon_click("+id+")' class='andonBox ordinary-box' workcenter='"+value.workCenterCode+"' workunit='"
							      +workUnitCode+"' productionControlNum='"+value.productionControlNum+"' processOperationId='"
							      +value.processOperationId+"'materialCode='"+value.materialCode+"' reqQuantity='"+value.reqQuantity+"' triggerMateriaLreqFlag='"+value.triggerMateriaLreqFlag
							      +"' andonCode='"+value.andonCode+"' notify1Flag='"+value.notify1Flag+"' notify1Time='"+value.notify1Time+"' notify1Messagecode='"+value.notify1Messagecode
							      +"' notify2Flag='"+value.notify2Flag+"' notify2Time='"+value.notify2Time+"' notify2Messagecode='"+value.notify2Messagecode
							      +"' notify3Flag='"+value.notify3Flag+"' notify3Time='"+value.notify3Time+"' notify3Messagecode='"+value.notify3Messagecode
							      +"' notify4Flag='"+value.notify4Flag+"' notify3Time='"+value.notify4Time+"' notify3Messagecode='"+value.notify4Messagecode
							      +"' notify3Flag='"+value.notify5Flag+"' notify3Time='"+value.notify5Time+"' notify3Messagecode='"+value.notify5Messagecode
							      +"'><div class='andon-title'><span class='andon-code'>"
							      +value.andonCode+"</span> <span class='andon-name'>"+value.andonText
							      +"</span></div><div class='andon-line'></div><ul><li><span><@label key='materialCode.C,colon'>物料编号：</@label>"+value.materialCode
							      +"</span></li><li><span><@label key='materialText.C,colon'>物料描述：</@label>"+value.materialText+"</span></li><li><span><@label key='material.C,quantity.C,colon'>物料数量：</@label>"
							      +reqQuantity+"</span></li><li><span><@label key='memo.C,colon'>备注：</@label>"
							      +memo+"</span></li></ul></div>";
							$td.append(ht); 
							$tr.append($td);
							index++;
							if(index==count){
								index=0;
							}
						});
					}
	            }
	        });
	     },
	     _getTime:function(fmt) {
	    	    var date = new Date();
	    	    var o = {
	    	        "M+": date.getMonth() + 1, // 月份
	    	        "d+": date.getDate(), // 日
	    	        "h+": date.getHours(), // 小时
	    	        "m+": date.getMinutes(), // 分
	    	        "s+": date.getSeconds(), // 秒
	    	        "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
	    	        "S": date.getMilliseconds() // 毫秒
	    	    };
	    	    if (/(y+)/.test(fmt))
	    	        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
	    	    for (var k in o)
	    	        if (new RegExp("(" + k + ")").test(fmt))
	    	            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	    	    return fmt;
	    	},
	     _andon_click:function(id){
	    	 $andon=$("#"+id);
	    	 if($andon.hasClass('ordinary-box')){
	    		 $andon.removeClass('ordinary-box');
	    		 $andon.addClass('hover-box');
	    		 $ul=$andon.find('ul');
	    		  var time =andonRequirementJs._getTime("yyyy-MM-dd hh:mm");  
	    		 $ul.append("<li class='clickTime'><span><@label key='triggerTime.C,colon'>触发时间：</@label>"+time+"</span></li>");
	    		 $ul.append("<li class='duration'><span><@label key='durationTime.C,colon'>持续时间：</@label></span><span class='diff'>"+0+"</span></li>");
	    		 $diffspan=$ul.find('.diff');
	    		 var interval=setInterval(function () {
	    			 $div=$("#"+id);
	    			 $df=$div.find('.diff');
	    		 	 var diff=$df.html();
	    	    	 diff++;
	    	    	 $df.html(diff);
	    	    	 //发送消息
	    	    	 var notify1Flag=$div.attr('notify1Flag');
	    	    	 if(notify1Flag=="1"){
	    	    		 var notify1Time=$div.attr('notify1Time');
	    	    		 if(notify1Time==diff){
	    	    			 var notify1Messagecode=$div.attr('notify1Messagecode');
	    	    			 //发送消息
	    	    			 $.ajax({
	    		 					type: 'POST',
	    		 					url: '${rc.getContextPath()}/manage/andonPull/sendMessage',
	    		 					data: {
	    		 						'messageCode':notify1Messagecode
	    		 					},
	    		 					dataType: "json",
	    		 					cache: false,
	    		 					success: function(data) {
	    		 						
	    		 					}
	    		 				});
	    	    		 }
	    	    	 };
	    	    	 var notify2Flag=$div.attr('notify1Flag');
	    	     	 if(notify2Flag=="1"){
	    	    		 var notify2Time=$div.attr('notify2Time');
	    	    		 if(notify2Time==diff){
	    	    			 var notify2Messagecode=$div.attr('notify2Messagecode');
	    	    			 //发送消息
	    	    			 $.ajax({
	    		 					type: 'POST',
	    		 					url: '${rc.getContextPath()}/manage/andonPull/sendMessage',
	    		 					data: {
	    		 						'messageCode':notify2Messagecode
	    		 					},
	    		 					dataType: "json",
	    		 					cache: false,
	    		 					success: function(data) {
	    		 						
	    		 					}
	    		 				});
	    	    		 }
	    	    	 };
	    	    	 var notify3Flag=$div.attr('notify1Flag');
	    	     	 if(notify3Flag=="1"){
	    	    		 var notify3Time=$div.attr('notify3Time');
	    	    		 if(notify3Time==diff){
	    	    			 var notify3Messagecode=$div.attr('notify3Messagecode');
	    	    			 //发送消息
	    	    			 $.ajax({
	    		 					type: 'POST',
	    		 					url: '${rc.getContextPath()}/manage/andonPull/sendMessage',
	    		 					data: {
	    		 						'messageCode':notify3Messagecode
	    		 					},
	    		 					dataType: "json",
	    		 					cache: false,
	    		 					success: function(data) {
	    		 						
	    		 					}
	    		 				});
	    	    		 }
	    	    	 };
	    	     	 var notify4Flag=$div.attr('notify4Flag');
	    	     	 if(notify4Flag=="1"){
	    	    		 var notify4Time=$div.attr('notify4Time');
	    	    		 if(notify4Time==diff){
	    	    			 var notify4Messagecode=$div.attr('notify4Messagecode');
	    	    			 //发送消息
	    	    			 $.ajax({
	    		 					type: 'POST',
	    		 					url: '${rc.getContextPath()}/manage/andonPull/sendMessage',
	    		 					data: {
	    		 						'messageCode':notify4Messagecode
	    		 					},
	    		 					dataType: "json",
	    		 					cache: false,
	    		 					success: function(data) {
	    		 						
	    		 					}
	    		 				});
	    	    		 }
	    	    	 };
	    	     	 var notify5Flag=$div.attr('notify5Flag');
	    	     	 if(notify5Flag=="1"){
	    	    		 var notify5Time=$div.attr('notify5Time');
	    	    		 if(notify5Time==diff){
	    	    			 var notify5Messagecode=$div.attr('notify5Messagecode');
	    	    			 //发送消息
	    	    			 $.ajax({
	    		 					type: 'POST',
	    		 					url: '${rc.getContextPath()}/manage/andonPull/sendMessage',
	    		 					data: {
	    		 						'messageCode':notify5Messagecode
	    		 					},
	    		 					dataType: "json",
	    		 					cache: false,
	    		 					success: function(data) {
	    		 						
	    		 					}
	    		 				});
	    	    		 }
	    	    	 }
	    		 }, 60000);
	    		 $diffspan.attr('interval',interval);
	    		 andonRequirementJs._intervalArray.push(interval);
	    		 var triggerMateriaLreqFlag= $andon.attr('triggerMateriaLreqFlag');
	    		 if(triggerMateriaLreqFlag=="1"){
	    			 //触发需求
	    			 $.ajax({
	 					type: 'POST',
	 					url: '${rc.getContextPath()}/manage/andonPull/createRequirement',
	 					data: {
	 						'workCenterCode': $andon.attr('workcenter'),
	 						'workUnitCode':  $andon.attr('workunit'),
	 						'productionControlNum':  $andon.attr('productionControlNum'),
	 						'processOperationId':  $andon.attr('processOperationId'),
	 						'triggerMateriaLreqFlag':  $andon.attr('triggerMateriaLreqFlag'),
	 						'andonCode':  $andon.attr('andonCode'),
	 						'materialCode':  $andon.attr('materialCode'),
	 						'reqQuantity':  $andon.attr('reqQuantity')
	 					},
	 					dataType: "json",
	 					cache: false,
	 					success: function(data) {
	 						
	 					}
	 				});
	    		 }
	    	 }else{
	    		 $andon.removeClass('hover-box');
	    		 $andon.addClass('ordinary-box');
	    		 $ul=$andon.find('ul');
	    		 $diffspan=$ul.find('.diff');
	    		 var interval=$diffspan.attr('interval');
	    		 clearInterval(interval);
	    		 $clickTime=$andon.find('.clickTime');
	    		 $duration=$andon.find('.duration');
	    		 $clickTime.remove();
	    		 $duration.remove();
	    		 
	    	 }
	     },
		_pcChange: function() {
			var pnum = $("#productionControlLookup\\.productionControlNum", navTab.getCurrentPanel()).val();
			$("#processOperation", navTab.getCurrentPanel()).empty();
			if (pnum) {
				DWZ.ajax({
					type: 'POST',
					url: '${rc.getContextPath()}/manage/productionControl/productionControlChange',
					data: {
						'productionControlNum': pnum
					},
					dataType: "json",
					cache: false,
					success: function(data) {
						if (data) {
							$.each(data, function(n, value) {
								var op = "<option value='"+value.id+"'>" + value.operationOrdinal + "-" + value.operationCode + "</option>";
								$("#processOperation").append(op);
							});
						}
					}
				});
			}
		},
		_open: function() {
			var speed = 400;
			var $collapsablePanel = $("#collapsablePanel", navTab.getCurrentPanel());
			var $arrow = $("#arrow", navTab.getCurrentPanel());
			var $pageHeader=$("#pageHeader", navTab.getCurrentPanel());
			var $andonArea=$("#andonArea", navTab.getCurrentPanel());
			if ($collapsablePanel.is(':visible')) {
				$collapsablePanel.prev('.divider').hide();
				$collapsablePanel.slideUp(speed, function() {
					$arrow.removeClass('arrow-up');
					$arrow.addClass('arrow-down');
					$pageHeader.removeClass('pageHeader');
					$pageHeader.addClass('pageHeader-collect');
					$andonArea.removeClass('andonArea-border');
				});
			} else {
				$collapsablePanel.slideDown(speed, function() {
					$arrow.removeClass('arrow-down');
					$arrow.addClass('arrow-up');
					$pageHeader.removeClass('pageHeader-collect');
					$pageHeader.addClass('pageHeader');
					$andonArea.addClass('andonArea-border');
				});
			}
		},
		_workCenterChange: function(s) {
			var workcenterCode = $("#workcenter", navTab.getCurrentPanel()).val();
			var validateUrl = "${rc.getContextPath()}/manage/productionControl/validateProductionControl";
			var lookupUrl = "${rc.getContextPath()}/manage/productionControl/productionControlLookUp";
			var suggestUrl = "${rc.getContextPath()}/manage/productionControl/productionControlSuggest";
			if (workcenterCode) {
				validateUrl = "${rc.getContextPath()}/manage/productionControl/validateProductionControl?workcenterCode=" + workcenterCode;
				lookupUrl = "${rc.getContextPath()}/manage/productionControl/productionControlLookUp?workcenterCode=" + workcenterCode;
				suggestUrl = "${rc.getContextPath()}/manage/productionControl/productionControlSuggest?workcenterCode=" + workcenterCode;
			} else {
				$("#workUnit", navTab.getCurrentPanel()).empty();
			}
			$("#productionControlLookup\\.productionControlNum", navTab.getCurrentPanel()).attr("remote", validateUrl);
			$("#productionControlLookup\\.productionControlNum", navTab.getCurrentPanel()).attr("suggestUrl", suggestUrl);
			$("#productionControlBtn", navTab.getCurrentPanel()).attr("href", lookupUrl);
		},
	}
</script>